<!--
 * @Description: 
 * @Date: 2024-04-27 18:19:46
 * @LastEditTime: 2024-04-27 19:26:28
 * @FilePath: \yh_fe_db_portal\src\page\WorkspaceOld\Notebook\OpeCellList\dataStructure.vue
-->
<template>
  <div class="dataStructure-wrap">
    <el-drawer
      title="算子定义"
      :visible.sync="visible"
      @closed="handleClose"
      ref="drawerRef"
    size="calc(100% - 200px)"
    >
   
  <CellList
            :sql.sync="sql"
            :retType="retType"
            :activeNotebookId="12"
            class="tab-content-cells"
            :ref="'cellList'"
            :currentNotebook="{ type: 'notebook', id: '12', uniq: '12' }"
            :removeTabId="12"></CellList>

    </el-drawer>
  </div>
</template>

<script>
import CellList from '@/page/WorkspaceOld/Notebook/OpeCellList'
import variableDrawer from './variableDrawer.vue'

export default {
  name: 'dataStructure',
  props: {
    datasourceId: {
      default: '26'
    },
    sql: {
      default: ''
    }
  },
  components:{CellList,variableDrawer},
  data () {
    return {
      retType: '1',
      visible: false,
      topoLoading: null,
      isloaded: true
    }
  },
  created () {},
  mounted () {
    this.visible = true
    // !this.isloaded &&
    //   this.$nextTick(() => {
    //     this.topoLoading = this.$loading({
    //       lock: true,
    //       target: this.$refs.drawerRef.$el.querySelector('.el-drawer__body')
    //     })
    //   })
  },
  methods: {
      
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  background-color: transparent;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  .name {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 18px;
    &.database {
      background-image: url('~@/assets/images/apiManage/databases.png');
    }
    &.tables {
      background-image: url('~@/assets/images/apiManage/tables.png');
    }
    &.columns {
      background-image: url('~@/assets/images/apiManage/columns.png');
    }
  }
  .icon {
    display: block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    margin-left: 6px;
    &.copy {
      background-image: url('~@/assets/images/apiManage/copy.png');
    }
    &.bridge {
      background-image: url('~@/assets/images/apiManage/bridge.png');
      margin-right: 6px;
    }
  }
}
</style>
